<template>
	<view class="">
		<view class="blank_wrap">
			<image src="@/static/square/newProduct.png" mode="widthFix" class="newProduct_sty" @click="newProduct">
			</image>
		</view>
		<view class="container">
			<view class="post-list" v-if="posts && posts.length > 0">
				<view v-for="(post, index) in posts" :key="post.id" class="post-item">
					<view class="head_wrap" @click="onDetaile(post)">
						<!-- 人物头像 -->
						<view class="HF_wrap">
							<view class="HF_profile" @click.stop="onHomePage(post)">
								<image :src="post.userAvatar" class="head_img"></image>
							</view>

							<view class="HD_wrap">
								<view class="HD_name">
									{{ post.userName }}
								</view>
								<view class="HD_Time"> {{ post.publishDate }}发布 </view>
							</view>
						</view>

						<!-- 关注  -->
						<view class="HR_wrap">
							<view class="HR_tuijian">
								<image v-if="post.top > 0" src="../../static/square/recommend.png" mode="heightFix">
								</image>
							</view>

							<view :class="post.isFavorite == 1 ? 'HR_btn_hui' : 'HR_btn'"
								v-if="post.customerId != Info.id && post.isLogoff != 1" @click.stop="ShowConfirm(post)">
								{{ post.isFavorite == 1 ? "已关注" : "关注" }}
							</view>

							<view class="HR_share" @click.stop="report('bottom', post)">
								<image src="../../static/square/menu.png" mode="widthFix" class="HR_menu"></image>
							</view>
						</view>
					</view>
					<!-- 文本内容 -->
					<!--  :class="{ 'expanded': post.isExpanded }" -->
					<view class="post-header pf80">
						<view :class="['PC-title',!post.isExpanded?'notShow':'']">{{ post.text }}
							<text :class="post.isExpanded? 'Pc_btn2' : 'Pc_btn' " v-if="post.text.length>80"
								@click.stop="toggleExpand(post)">
								{{ post.isExpanded ? '收起' : '展开' }} </text>
						</view>
					</view>

					<!-- 相册和视频 -->
					<view class="post-content pf80">
						<!-- 上传的是视频时 -->
						<view class="video_wrap" v-if="post.video">
							<!-- <video :ref="'video' + post.id" :id="'video' + post.id" class="video-item" :src="post.video"
								@play="handlePlay(index,post.id)" @pause="handlePause(post.id)" controls></video> -->

							<ls-dom-video ref="domVideo" class="video-item" object-fit="contain" :controls="true"
								:show-progress="false" :show-fullscreen-btn="false" :show-play-btn="false"
								:show-bottom-progress="false" :autoplay="false" :src="post.video"></ls-dom-video>
						</view>

						<view v-if="post.photoList && post.photoList.length > 0 && !post.video" class="images">
							<!-- 两张或者多张时 -->
							<block v-if="post.photoList.length > 1">
								<view v-for="(img, index) in post.photoList" @click.stop="onShowImg(post, index)"
									:key="index" class="item_wrap">
									<view v-if="index < 2" :class="index == 1 ? 'postImage-more' : 'postImage_wrap'">
										<image :src="img" class="postImage" mode="aspectFill">
										</image>
										<view class="more_wrap" v-if="post.photoList.length > 2 && index == 1">
											<image src="@/static/square/more.png" mode="widthFix" class="more"></image>
											<view class="img_num">
												+{{ post.photoList.length - 2 }}
											</view>
										</view>
									</view>
								</view>
							</block>

							<!-- 只有一张图片时 -->
							<block v-if="post.photoList.length == 1">
								<view v-for="(img, index) in post.photoList" @click.stop="onShowImg(post, index)"
									:key="index" class="item_wrap">
									<view v-if="index < 2" :class="index == 1 ? 'postImage-more' : 'postImage_wrap'">
										<image :src="img" class="postImage" mode="aspectFill">
										</image>
									</view>
								</view>
							</block>
						</view>
					</view>

					<!-- 点赞 -->
					<view class="post-footer pf80">
						<view class="likes" @click.stop="onLike(post)">
							<image v-show="!post.useFavorite" src="@/static/square/love.png" mode="heightFix"
								class="bubble"></image>
							<image v-show="post.useFavorite == 1" src="@/static/square/loveRed.png" mode="heightFix"
								class="bubble"></image>
							<text style="margin-left: 2rpx">{{ post.favoriteNum || 0 }}</text>
						</view>
						<view class="comments" @click.stop="onRemark(post)">
							<image src="../../static/square/bubble.png" mode="heightFix" class="bubble"></image>
							<text style="margin-left: 2rpx">{{ post.commentNum || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="nullData" v-else>
				<image src="../../static/follow/follow1.png" mode="widthFix"></image>
				<view class="txt"> 还没有发动态呢，赶快行动起来~ </view>
			</view>
			<!-- 底部弹窗 -->
			<uni-popup ref="popup" borderRadius="20rpx 20rpx 0 0 " background-color="#fff">
				<view class="pop_height">
					<view class="report_red" @click="onDel" v-if="item.customerId == Info.id">
						删除
					</view>
					<view class="report_red" @click="onReport" v-else> 举报 </view>
					<view class="cancel_des" @click="pop_cancel"> 取消 </view>
				</view>
			</uni-popup>

			<!-- 发布 -->
			<!-- #ifdef H5 -->
			<view class="release" @click="onRelease">
				<image src="@/static/square/release.png" mode="widthFix" class="release_img"></image>
			</view>
			<!-- #endif -->
		</view>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp">
				<view class="followConfirm">
					<view class="txt"> 是否取关该用户 </view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false"> 取消 </view>
						<view class="btn confirm" @click="Interest"> 确定 </view>
					</view>
				</view>
			</view>
		</u-overlay>
		<!--导航栏 -->
		<tabBar selectedIndex="1"></tabBar>
	</view>
</template>

<script>
	import {
		threadsList,
		addCustomerFans,
		deleteFavorite,
		addLike,
	} from "@/api/apis.js";
	import {
		delPost
	} from "@/api/post.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				currentPlayingIndex: null, // 当前正在播放的视频的索引
				modalShow: false,
				confrim: {
					pageNo: 1,
					pageSize: 8,
				},
				isLoading: true, // 是否加载完数据
				userCustomerId: "",
				item: {},
				GzItem: {},
				posts: [],
				activeKey: 1, // 当前激活的导航项的索引，0表示第一个导航项
			};
		},

		onLoad() {
			// #ifdef APP-PLUS
			const subNvue = uni.getSubNVueById("subNvue"); // 这个id是pages.json下绑定的唯一id
			subNvue.show("none", 0, () => {
				subNvue.setStyle({
					bottom: "85px",
					right: "20px",
					width: "50px",
					height: "50px",
					background: "transparent",
					borderRadius: "50%",
				});
			});

			uni.$on("subNvue", (e) => {
				console.log("参数", e);
				this.onRelease();
			});
			// #endif
		},

		computed: {
			...mapState("userInfo", ["Info", "storeId"]),
			...mapState(["dynamicTabbar"]),
		},

		// created() {
		// 	this.confrim.pageNo = 1;
		// 	this.posts = []
		// 	this.onSearch()
		// },

		onShow() {
			uni.hideTabBar({
				animation: false
			})
			this.confrim.pageNo = 1;
			this.posts = [];
			this.onSearch();
		},

		onReachBottom() {
			if (this.isLoading) {
				this.loadMore(); // 触底加载更多
			}
		},
		onPullDownRefresh() {
			this.refreshData(); // 下拉刷新
		},

		methods: {
			setTabe() {
				this.changeTabbar(selfBar)
			},

			// 加载更多数据
			loadMore() {
				this.confrim.pageNo++;
				this.onSearch(this.confrim.pageNo, this.confrim.pageSize);
			},

			// 加载更多数据
			loadMore() {
				this.confrim.pageNo++;
				this.onSearch(this.confrim.pageNo, this.confrim.pageSize);
			},

			// 刷新数据
			refreshData() {
				this.confrim.pageNo = 1;
				this.posts = [];
				this.onSearch(this.confrim.pageNo, this.confrim.pageSize);
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},
			onSearch() {
				let params = {
					customerId: this.Info.id || null,
					...this.confrim,
				};
				threadsList(params).then((res) => {
					// this.posts = res.result.records
					let records = res.result.records;
					if (records.length < this.confrim.pageSize) {
						this.isLoading = false;
					} else {
						this.isLoading = true;
					}
					this.posts = [...this.posts, ...records];
					uni.stopPullDownRefresh(); // 停止下拉刷新
				});
			},

			toggleExpand(item) {
				console.log(item);
				item.isExpanded = !item.isExpanded;
				this.posts = [...this.posts];
			},

			operationFun() {
				console.log("页面获取到了子窗体的点击事件，继续其它操作。");
			},

			//查看个人主页
			onHomePage(item) {
				uni.navigateTo({
					url: `/pages/homepage/homepage?customerId=${item.customerId}`,
				});
			},

			// 查看帖子闲情
			onDetaile(item) {
				uni.navigateTo({
					url: `/pages/postDetail/postDetail?id=${item.id}`,
				});
			},

			// 评论
			onRemark(item) {
				uni.navigateTo({
					url: `/pages/postDetail/postDetail?id=${item.id}&isRemark=yes`,
				});
			},

			// 预览图图片
			onShowImg(item, index) {
				uni.previewImage({
					current: index,
					urls: item.photoList,
				});
			},

			// 底部弹窗
			report(type, item) {
				console.log(item);
				this.item = item; //当前举报的帖子内容
				this.type = type;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type);
			},

			//弹窗
			ShowConfirm(item) {
				this.GzItem = item;
				if (item.isFavorite == 1) {
					this.modalShow = true;
				} else {
					this.Interest();
				}
			},

			// 取消关注
			Interest() {
				let item = this.GzItem;
				console.log(item);
				let arr = this.posts
					.map((item1, index1) =>
						item1.customerId == item.customerId ? index1 : null
					)
					.filter((index1) => index1 != null);
				if (item.isFavorite == 1) {
					arr.map((item) => {
						this.posts[item].isFavorite = 0;
					});
					let params = {
						followerId: item.customerId,
					};
					// 取关
					deleteFavorite(params).then((res) => {});
					// uni.showModal({
					// 	title: '温馨提示',
					// 	content: '是否取关该用户',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			console.log('用户点击确定');
					// 			// item.isFavorite = 0
					// 			arr.map(item => {
					// 				this.posts[item].isFavorite = 0
					// 			})
					// 			let params = {
					// 				followerId: item.customerId
					// 			}
					// 			// 取关
					// 			deleteFavorite(params).then(res => {})
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
				} else {
					let params = {
						followerId: item.customerId,
					};
					// 关注
					addCustomerFans(params).then((res) => {
						if (res.success) {
							arr.map((item) => {
								this.posts[item].isFavorite = 1;
							});
						}
					});
				}
			},

			// 点赞 点赞业务类型 0 帖子 1 评论"
			onLike(item) {
				item.useFavorite = item.useFavorite == 1 ? 0 : 1;
				if (item.useFavorite == 1) {
					item.favoriteNum++;
					let params = {
						bizId: item.id,
						bizType: 0,
						liked: true,
					};
					this.updeta(params);
				} else {
					item.favoriteNum--;
					let params = {
						bizId: item.id,
						bizType: 0,
						liked: false,
					};
					this.updeta(params);
				}
			},
			// 编辑
			updeta(params) {
				addLike(params).then((res) => {
					console.log(res);
				});
			},

			// 举报
			onReport() {
				this.pop_cancel();
				uni.showModal({
					title: "提示",
					content: "是否举报该用户？",
					cancelColor: "#aaaaaa",
					confirmColor: "#FE2C55",
					success: (res) => {
						if (res.confirm) {
							console.log("确定，退出登录");
							uni.navigateTo({
								url: `/pages/userReport/userReport?id=${this.item.id}&Type=0`,
							});
						} else if (res.cancel) {
							return;
						}
					},
				});
			},

			onDel() {
				delPost({
					id: this.item.id,
				}).then((res) => {
					if (res.success) {
						uni.showToast({
							title: "删除成功",
							duration: 2000,
						});
						this.refreshData();
						this.$refs.popup.close();
					}
				});
			},

			// 取消
			pop_cancel() {
				this.$refs.popup.close();
			},

			handlePlay(index, videoId) {
				// 如果当前有其他视频正在播放，则暂停它
				if (
					this.currentPlayingIndex !== null &&
					this.currentPlayingIndex !== index
				) {
					this.$refs[
						"video" + this.posts[this.currentPlayingIndex].id
					][0].pause();
				}
				// 更新当前播放的视频索引
				this.currentPlayingIndex = index;
			},

			handlePause(videoId) {
				// 如果暂停的是当前正在播放的视频，则更新索引
				if (
					this.currentPlayingIndex !== null &&
					this.posts[this.currentPlayingIndex].id === videoId
				) {
					this.currentPlayingIndex = null;
				}
			},

			// 跳转到发布页
			onRelease() {
				uni.navigateTo({
					url: "/pages/release/release",
				});
			},

			// 跳新品推荐页
			newProduct() {
				uni.navigateTo({
					url: "/pages/newProduct/newProduct",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.slot-icon {
		width: 30rpx;
	}

	.blank_wrap {
		width: 100%;
		background-color: #fff;

		.newProduct_sty {
			width: 100%;
		}
	}

	.container {
		background-color: #fff;
		// #ifdef APP-PLUS
		// margin-bottom: calc(60rpx + constant(safe-area-inset-bottom));
		// margin-bottom: calc(60rpx + env(safe-area-inset-bottom));
		// #endif

		// #ifdef H5
		// margin-bottom: calc(200rpx + constant(safe-area-inset-bottom));
		// margin-bottom: calc(200rpx + env(safe-area-inset-bottom));
		// #endif
	}

	.pf80 {
		padding-left: 80rpx;
	}

	.post-list {
		padding: 0 24rpx;
		box-sizing: border-box;
		padding-bottom: calc(var(--window-bottom) + 160rpx);

		.post-item {
			margin-top: 0rpx;
		}

		.post-item:nth-child(n + 1) {
			margin-top: 60rpx;
		}

		.head_wrap {
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;

			// 人物头像
			.HF_wrap {
				display: flex;
				color: rgba(51, 51, 51, 0.8);

				.HF_profile {

					// 头像
					.head_img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 0px 0px 0px 0px;
						border-radius: 50%;
					}
				}

				.HD_wrap {
					margin-left: 20rpx;
					margin-top: 10rpx;

					.HD_name {
						font-size: 28rpx;
					}

					.HD_Time {
						font-size: 24rpx;
					}
				}
			}

			// 关注
			.HR_wrap {
				display: flex;
				align-items: center;

				.HR_tuijian {
					display: flex;
					align-items: center;

					image {
						height: 44rpx;
					}

					// .HR_size {
					// 	font-family: STHupo, STHupo;
					// 	font-weight: 400;
					// 	font-size: 28rpx;
					// 	line-height: 44rpx;
					// 	text-align: left;
					// 	font-style: normal;
					// 	text-transform: none;
					// 	text-fill-color: linear-gradient(180deg, #FD702B 0%, #FF2828 100%);
					// }
				}

				// 关注
				.HR_btn {
					width: 96rpx;
					height: 44rpx;
					background: #ffffff;
					border-radius: 22rpx;
					border: 2rpx solid $uni-text-color-red;
					font-weight: 400;
					font-size: 24rpx;
					color: $uni-text-color-red;
					display: flex;
					justify-content: center;
					align-items: center;

					margin: 0 14rpx 0 20rpx;
				}

				// 关注
				.HR_btn_hui {
					width: 120rpx;
					height: 44rpx;
					background: #ffffff;
					border-radius: 22rpx;
					border: 2rpx solid #7f7f7f;
					font-weight: 400;
					font-size: 24rpx;
					color: #7f7f7f;
					display: flex;
					justify-content: center;
					align-items: center;

					margin: 0 14rpx 0 20rpx;
				}

				.HR_share {
					width: 60rpx;
					height: 44rpx;
					border-radius: 0px 0px 0px 0px;
					display: flex;
					justify-content: center;
					align-items: center;

					.HR_menu {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}

	.nullData {
		width: 100%;
		margin-top: 300rpx;

		image {
			width: 35%;
			margin: 0 auto;
			display: block;
		}

		.txt {
			text-align: center;
			color: #8c8ea0;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
	}

	// 文本
	.post-header {
		position: relative;

		/* 用于绝对定位按钮 */
		.PC-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;

			// display: -webkit-box;
			// -webkit-line-clamp: 4;
			// /* 限制显示4行 */
			// -webkit-box-orient: vertical;
			// // word-break: break-all;
			word-break: break-word;
			// overflow: hidden;
			// text-overflow: ellipsis;
		}

		.notShow {
			// height: 300rpx;
			// overflow: hidden;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			// word-break: break-all;
			word-break: break-word;



		}

		.Pc_btn {
			color: #4B7DFF;
			font-weight: 400;
			text-align: right;
			font-size: 28rpx;
			width: 140rpx;
			height: 40rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			border: none;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
			padding: 5rpx 10rpx;
			cursor: pointer;
		}

		.Pc_btn2 {
			display: inline-block;
			// min-width: 20rpx;
			color: #4B7DFF;
			font-weight: 400;
			text-align: right;
			font-size: 28rpx;
			width: fit-content;
			height: 40rpx;
			// position: absolute;
			border: none;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
			padding-left: 10rpx;
			cursor: pointer;
		}
	}

	// 展开
	// .expanded .PC-title {
	// 	-webkit-line-clamp: none;
	// 	-webkit-box-orient: horizontal;
	// 	// word-break: break-all;
	// 	word-break: break-word;
	// 	/* 展开时取消行数限制 */
	// 	height: auto;
	// 	/* 展开时高度自动 */
	// }

	//内容
	.post-content {
		.images {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item_wrap {
				width: 49%;
			}

			.postImage_wrap {
				position: relative;
				margin-top: 10rpx;
				/* 或者指定具体的像素值 */
				width: 296rpx;
				height: 296rpx;
				/* 示例高度 */
				object-fit: cover;
				display: block;
				overflow: hidden;
			}

			.postImage-more {
				position: relative;
				margin-top: 10rpx;
				/* 或者指定具体的像素值 */
				width: 296rpx;
				height: 296rpx;
				border-radius: 12rpx;
				/* 示例高度 */
				object-fit: cover;
				display: block;
				overflow: hidden;
			}

			/* 移除图片底部的小间隙 */
			.postImage {
				// position: absolute;
				height: 100%;
				width: 100%;
				border-radius: 12rpx;
			}

			.more_wrap {
				position: absolute;
				display: flex;
				bottom: 12rpx;
				right: 12rpx;
				z-index: 1;
				width: 68rpx;
				height: 28rpx;
				background: #000000;
				border-radius: 4rpx;
				opacity: 0.6;
				padding: 4rpx 8rpx;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;

				.more {
					height: 20rpx;
					width: 20rpx;
				}

				.img_num {
					color: #fff;
					font-size: 20rpx;
				}
			}
		}

		// 视频
		.video_wrap {
			margin-top: 24rpx;
			text-align: center;

			.video-item {
				height: 400rpx;
			}
		}
	}

	// 底部
	.post-footer {
		margin-top: 40rpx;
		display: flex;
		justify-content: end;
		justify-content: flex-end;

		.comments,
		.likes {
			display: flex;
			justify-content: end;
			align-items: center;
			font-weight: 400;
			font-size: 22rpx;
			color: #bababa;

			.bubble {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.comments {
			margin-left: 46rpx;
			margin-right: 32rpx;
		}
	}

	// 底部弹窗
	.pop_height {
		height: 16vh;
		text-align: center;
		display: flex;
		flex-direction: column;
		padding: 10rpx;

		.report_red {
			margin-top: 30rpx;
			color: $uni-text-color-red;
		}

		.cancel_des {
			margin-top: 50rpx;
			color: #888;
		}
	}

	// 发布
	.release {
		position: fixed;
		bottom: calc(140rpx + constant(safe-area-inset-bottom));
		bottom: calc(140rpx + env(safe-area-inset-bottom));
		right: 40rpx;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		z-index: 9999999;

		.release_img {
			height: 100%;
			width: 100%;
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		z-index: 9;

		.followConfirm {
			width: 70%;
			// height: 250rpx;
			padding: 45rpx 45rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;

			.txt {
				text-align: center;
				margin-bottom: 45rpx;
			}

			.btnGroup {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.btn {
					padding: 18rpx 0rpx;
					border-radius: 35rpx;
					border: 0;
					font-size: 26rpx;
					width: 46%;
					text-align: center;
				}

				.cancel {
					background-color: #ededed;
					color: #4d4d4d;
				}

				.confirm {
					background-image: linear-gradient(to right, #ff4c6e, #fe2c55);
					color: #fff;
				}
			}
		}
	}
</style>